<%--
  Created by IntelliJ IDEA.
  User: 墨墨之家
  Date: 2021/11/6
  Time: 12:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/common/head.jsp" %>
    <link rel="stylesheet" href="ztree/zTreeStyle.css">
    <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="crowd/menu.js"></script>
    <script type="text/javascript">

        //封装到了menu.js
        // $.ajax({
        //     "url": "menu/get/whole/tree.json", "type": "post", "dataType": "json", "success": function (response) {
        //         var result = response.result;
        //         console.log(response)
        //         if (result == "SUCCESS") {
        //             // 2.创建 JSON 对象用于存储对 zTree 所做的设置
        //             var setting = {
        //                 "view": {
        //                     "addDiyDom": myAddDiyMenu,
        //                     "addHoverDom": myAddHoverDom,
        //                     "removeHoverDom": myRemoveHoverDom
        //                 },
        //                 "data": {
        //                     // 给每个菜单更换url
        //                     "key": {
        //                         "url": "mm",
        //
        //                     }
        //                 }
        //             };
        //             // 3.从响应体中获取用来生成树形结构的 JSON 数据
        //             var zNodes = response.data;
        //             // 4.初始化树形结构
        //             $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        //         }
        //         if (result == "FAILED") {
        //             layer.msg(response.message);
        //         }
        //     }
        // });
        // 填充页面
        generateTree()
        $(function () {
            $("#treeDemo").on("click", ".addBtn", function () {
                $("#menuAddModal").modal("show");
                window.pid = this.id;
                return false;
            });
            // 添加menu保存到本地数据库
            $("#menuSaveBtn").click(function () {
                var name = $("#menuAddModal [name=name]").val();
                var url = $("#menuAddModal [name=url]").val();
                var icon = $("#menuAddModal [name=icon]:checked").val();
                $.ajax({
                    "url": "save/to/node/page.json",
                    "data": {"pid": window.pid, "name": name, "url": url, "icon": icon},
                    "type": "post",
                    success: function (resp) {
                        var result = resp.result;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功");
                            generateTree()
                        } else if (result == "FAILED") {
                            layer.msg("操作失败" + result.message);
                        }
                    },
                    dataType: "json"
                });
                $("#menuAddModal").modal("hide");
            });
            // 弹出删除模态框进行数据回显
            $("#treeDemo").on("click", ".removeBtn", function () {
                $("#menuConfirmModal").modal("show");
                window.id = this.id;
                var name1 = this.name;
                $("#removeNodeSpan").text(name1)
                return false;
            });
            // 删除menu
            $("#confirmBtn").click(function () {
                $.ajax({
                    "url": "menu/to/remove/page.json",
                    "data": {"id": window.id},
                    "type": "post",
                    success: function (resp) {
                        var result = resp.result;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功");
                            generateTree()
                        } else {
                            layer.msg("操作失败");
                        }
                    },
                    dataType: "json"
                })
                $("#menuConfirmModal").modal("hide");
            });

            // 打开修改模态框进行数据回显
            $("#treeDemo").on("click", ".editBtn", function () {
                $("#menuEditModal").modal("show");
                window.id = this.id;
                var url1 = $(this).attr("Aurl");
                var icon1 = $(this).attr("Icon");
                var name1 = this.name;
                $("#menuEditModal [name=name]").val(name1);
                $("#menuEditModal [name=url]").val(url1);
                var replace = icon1.replace(/[\r\n]/g, "");
                // 单选按钮的表单回显！！，val一定要加上[]！！！
                $("#menuEditModal [name=icon]").val([replace]);
                return false;
            })

            // 对menu进行修改
            $("#menuEditBtn").click(function () {
                var name = $("#menuEditModal [name=name]").val();
                var url = $("#menuEditModal [name=url]").val();
                var icon = $("#menuEditModal [name=icon]:checked").val();
                $.ajax({
                    "url": "menu/to/edit.json",
                    "data": {id: window.id, "name": name, "url": url, "icon": icon},
                    "type": "post",
                    success: function (response) {
                        var result = response.result;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功");
                            generateTree()
                        } else {
                            layer.msg("操作失败");
                        }
                    }
                })
                $("#menuEditModal").modal("hide");
            })
        });
    </script>
</head>
<body>
<%--静态包含--%>
<%@include file="/WEB-INF/common/nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%--静态包含--%>
        <%@include file="/WEB-INF/common/sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/modal-menu-add.jsp" %>
<%@include file="/WEB-INF/modal-menu-edit.jsp" %>
<%@include file="/WEB-INF/modal-menu-confirm.jsp" %>
</body>
</html>
